import { Modal } from 'antd';
import bg1 from '../assets/images/od.png'
import bg2 from '../assets/2.jpg'
import { useNavigate } from "react-router-dom";
import { useTranslation } from 'react-i18next';
import swiper3 from '../assets/images/swiper3.png'


const Footter = ({ isModalOpen, onEvent }) => {
  const { t } = useTranslation()
  const unavigate = useNavigate()

  const setIsModalOpen = () => {
    onEvent(false)
  }
  return (
    <>
      <Modal title={t('申请成为 OD 或 SD 人员')} open={isModalOpen} onCancel={setIsModalOpen} footer={null}>
        <div className="max-w-4xl w-full bg-white p-10 rounded-lg shadow-md">
          <div className="flex justify-around">
            <div onClick={() => (unavigate('/application/OD'), setIsModalOpen(false))} className="flex flex-col items-center text-center cursor-pointer transition-transform transform hover:scale-110">
              <img src={bg1} alt="OD" className="object-cover w-36 h-36 rounded-full border-4 border-transparent transition duration-300 ease-in-out hover:border-blue-600" />
              <label className="block mt-2 text-lg font-bold">{t('申请成为')} OD</label>
            </div>
            <div onClick={() => (unavigate('/application/SD'), setIsModalOpen(false))} className="flex flex-col items-center text-center cursor-pointer transition-transform transform hover:scale-110">
              <img src={swiper3} alt="SM" className=" object-cover w-36 h-36 rounded-full border-4 border-transparent transition duration-300 ease-in-out hover:border-blue-600" />
              <label className="block mt-2 text-lg font-bold">{t('申请成为')} SD</label>
            </div>
          </div>
        </div>
      </Modal >
    </>
  )
}

export default Footter